<template>
	<LoginFormTitle v-show="getShow" class="enter-x" />
	<Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef" v-show="getShow">
		<FormItem name="key"><Input size="large" v-model:value="formData.key" :hidden="true" /></FormItem>
		<FormItem name="account" class="enter-x"><Input size="large" v-model:value="formData.account" :placeholder="t('sys.login.userName')" class="fix-auto-fill" /></FormItem>
		<FormItem name="password" class="enter-x">
			<InputPassword size="large" visibilityToggle v-model:value="formData.password" :placeholder="t('sys.login.password')" />
		</FormItem>
		<!-- 验证码 -->
		<ARow class="enter-x">
			<ACol :span="16">
				<FormItem name="code" class="enter-x">
					<Input size="large" v-model:value="formData.code" :placeholder="t('sys.login.captcha')" style="min-width: 180px" autoComplete="off" />
				</FormItem>
			</ACol>
			<ACol :span="8">
				<FormItem :style="{ 'text-align': 'right', 'margin-left': '5px' }" class="enter-x"><img :src="codeUrl" @click="getCode" /></FormItem>
			</ACol>
		</ARow>

		<ARow class="enter-x">
			<ACol :span="12">
				<FormItem>
					<Checkbox v-model:checked="rememberMe" size="small">{{ t('sys.login.rememberMe') }}</Checkbox>
				</FormItem>
			</ACol>
		</ARow>

		<FormItem class="enter-x">
			<Button type="primary" size="large" block @click="handleLogin" :loading="loading">{{ t('sys.login.loginButton') }}</Button>
			<!-- <Button size="large" class="mt-4 enter-x" block @click="handleRegister">
        {{ t('sys.login.registerButton') }}
      </Button>-->
		</FormItem>
		<!-- <ARow class="enter-x">
      <ACol :md="8" :xs="24">
        <Button block @click="setLoginState(LoginStateEnum.MOBILE)">{{
          t('sys.login.mobileSignInFormTitle')
        }}</Button>
      </ACol>
      <ACol :md="8" :xs="24" class="!my-2 !md:my-0 xs:mx-0 md:mx-2">
        <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">{{
          t('sys.login.qrSignInFormTitle')
        }}</Button>
      </ACol>
      <ACol :md="7" :xs="24">
        <Button block @click="setLoginState(LoginStateEnum.REGISTER)">{{
          t('sys.login.registerButton')
        }}</Button>
      </ACol>
    </ARow> -->

		<!-- <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider> -->
		<!-- <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
      <GithubFilled />
      <WechatFilled />
      <AlipayCircleFilled />
      <GoogleCircleFilled />
      <TwitterCircleFilled />
    </div> -->
	</Form>
</template>
<script lang="ts" setup>
import { reactive, ref, toRaw, unref, computed, onMounted } from 'vue';
import { Checkbox, Form, Input, Row, Col, Button } from 'ant-design-vue';
import { GithubFilled } from '@ant-design/icons-vue';
import LoginFormTitle from './LoginFormTitle.vue';

import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';

import { useUserStore } from '/@/store/modules/user';
import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
import { useDesign } from '/@/hooks/web/useDesign';
import { getCaptcha } from '/@/api/common/auth';
import { onKeyStroke } from '@vueuse/core';

const ACol = Col;
const ARow = Row;
const FormItem = Form.Item;
const InputPassword = Input.Password;
const { t } = useI18n();
const { notification, createErrorModal } = useMessage();
const { prefixCls } = useDesign('login');
const userStore = useUserStore();

const { setLoginState, getLoginState } = useLoginState();
const { getFormRules } = useFormRules();

const formRef = ref();
const loading = ref(false);
const rememberMe = ref(false);
const codeUrl = ref();

const formData = reactive({
	account: 'admin',
	password: 'admin',
	key: '',
	code: ''
});

const { validForm } = useFormValid(formRef);

onMounted(() => {
	getCode();
});

onKeyStroke('Enter', handleLogin);

const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);

async function getCode() {
	const codeModel = await getCaptcha();
	codeUrl.value = codeModel.codeUrl;
	formData.key = codeModel.key;
}

async function handleLogin() {
	const data = await validForm();
	if (!data) return;
	try {
		loading.value = true;
		const userInfo = await userStore.login(
			toRaw({
				password: data.password,
				username: data.account,
				uuid: data.key,
				code: data.code,
				mode: 'none' //不要默认的错误提示
			})
		);
		if (userInfo) {
			notification.success({
				message: t('sys.login.loginSuccessTitle'),
				description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.nickname}`,
				duration: 3
			});
		}
	} catch (error) {
		createErrorModal({
			title: t('sys.api.errorTip'),
			content: error.message || t('sys.api.networkExceptionMsg'),
			getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body
		});
		getCode();
	} finally {
		loading.value = false;
	}
}
</script>
